/*
  学习目标：评论列表-返回时清除回复内容
*/

import { useAppSelector } from '@/store';
import { clearOriginCommentsAction, getReplyCommentsByIdAction } from '@/store/action/comment';
import { NavBar } from 'antd-mobile';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import CommentFooter from '../CommentFooter';
import CommentItem from '../CommentItem';
import NoComment from '../NoComment';
import styles from './index.module.scss';
export default function CommentReply() {
  const dispatch = useDispatch();
  const { originComment, replyComments } = useAppSelector((state) => state.comment);

  useEffect(() => {
    // 如果原始数据不存在，旧不要发请求了
    if (!originComment.com_id) return;

    dispatch(getReplyCommentsByIdAction({ type: 'c', source: originComment.com_id }));
  }, [dispatch, originComment.com_id]);

  const handBack = () => {
    dispatch({
      type: 'comment/saveReplyComments',
      payload: {
        results: [],
      } as any,
    });
    dispatch(clearOriginCommentsAction());
  };
  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        {/* 顶部导航栏 */}
        <NavBar className="transparent-navbar" onBack={handBack}>
          <div>{replyComments.results.length}条回复</div>
        </NavBar>

        {/* 原评论信息 */}
        <div className="origin-comment">
          <CommentItem comment={originComment}></CommentItem>
        </div>

        {/* 回复评论的列表 */}
        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {replyComments.results.map((item) => (
            <CommentItem comment={item} key={item.com_id}></CommentItem>
          ))}
          {!replyComments.results.length && <NoComment />}
        </div>

        {/* 评论工具栏，设置 type="reply" 不显示评论和点赞按钮 */}
        <CommentFooter type="reply" />
      </div>
    </div>
  );
}
